<template>
    <div>
        list
        <div ref="myechart" style="width: 100%; height: 400px"></div>
    </div>
</template>

<script>
import dept from '../../../api/department.js';
import user from '../../../api/user.js';
export default {
    data() {
        return {
            deptList:[],
        }
    },
    created(){

    },
    mounted() {
        // this.setChart();
        this.queryAllDept()
    },
    methods: {
        setChart() {
            var myChart = this.$echarts.init(this.$refs.myechart);
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: "部门请假统计",
                },
                tooltip: {},
                legend: {

                },
                xAxis: {
                    type : 'category', 
                    boundaryGap: false,
                    data: this.deptList,
                    axisLabel: {
                        show: true,
                        rotate: 0, //角倾斜显示
                        formatter: function (val) {
                            return val.split("").join("\n");
                        }, //横轴信息文字竖直显示
                        textStyle: {
                            color: ["rgb(142, 199, 220)"],
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#023c7a",
                            width: 1,
                        },
                    },                    
                },
                yAxis: {},
                series: [
                    {
                        name: "销量",
                        type: "bar",
                        data: [5, 20, 36, 10, 10, 20,20,20,20,20,20,20],
                    },
                ],
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        //获取所有部门
        async queryAllDept(){
            const res = await dept.queryAllDept()
            if(res.data.code === '000'){
                res.data.data.forEach( dept =>{
                    this.deptList.push(dept.departmentName)
                })
                var myChart = this.$echarts.init(this.$refs.myechart);
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: "部门请假统计",
                    },
                    tooltip: {},
                    legend: {
                        data: ["一级部门","二级部门","三级部门"],
                    },
                    xAxis: {
                    type : 'category', 
                    boundaryGap: false,
                    data: this.deptList,
                    axisLabel: {
                        show: true,
                        rotate: 0, //角倾斜显示
                        formatter: function (val) {
                            return val.split("").join("\n");
                        }, //横轴信息文字竖直显示
                        textStyle: {
                            color: ["rgb(142, 199, 220)"],
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#023c7a",
                            width: 1,
                        },
                    }, 
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: "一级部门",
                            type: "bar",
                            data: [15, 50, 46, 10, 20,35,56,15,23,35,26,5,59],
                        },
                        {
                            name: "二级部门",
                            type: "bar",
                            data: [5, 20, 56, 10, 30,15,16,45,13,45,56,15,96],
                        },
                        {
                            name: "三级部门",
                            type: "bar",
                            data: [5, 90, 16, 20, 90,55,36,25,33,45,36,35,150],
                        },                                                 
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。

                myChart.setOption(option);            
            }

        }
    },
};
/**
type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列

 */
</script>

<style lang="scss" scoped>

</style>

